<template>
  <div>
    <!-- 
    禁用效果
      AttrList 不禁用
      AddOrUpdateAttr 禁用

      isShowAttrList -> true -> 当前渲染的是AttrList组件 -> 不禁用 false
      isShowAttrList -> false -> 当前渲染的是AddOrUpdateAttr组件 -> 禁用 true
   -->
    <CategorySelector :disabled="!isShowAttrList" />
    <!-- 
    v-if
    v-show

    $event代表事件回调函数的第一个参数
   -->
    <AttrList
      v-if="isShowAttrList"
      @setIsShowAttrList="isShowAttrList = $event"
    />
    <AddOrUpdateAttr v-else @setIsShowAttrList="isShowAttrList = $event" />
  </div>
</template>

<script lang="ts">
export default {
  name: "XAttr",
};
</script>

<script lang="ts" setup>
import { ref } from "vue";
import CategorySelector from "@/components/CategorySelector/index.vue";
import AttrList from "./components/attr-list.vue";
import AddOrUpdateAttr from "./components/add-or-update-attr.vue";

const isShowAttrList = ref(true);
</script>

<style scoped></style>
